import React from 'react';
import { Button, Modal, Input } from 'antd';
import { useState } from 'react';


// 自定义钩子
function useModal() {
    const [visible, setVisible] = useState(false);
    const [formValues, setFormValues] = useState({ id: '', name: '' });

    const showModal = () => {
        setVisible(true);
    };

    const handleOk = () => {
        console.log('Form Values:', formValues);
        setVisible(false);
    };

    const handleCancel = () => {
        setVisible(false);
    };

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setFormValues({ ...formValues, [name]: value });
    };

    return { visible, showModal, handleOk, handleCancel, formValues, handleInputChange };
}

const ModalComponent: React.FC = () => {
    const { visible, showModal, handleOk, handleCancel, formValues, handleInputChange } = useModal();

    return (
        <div>
            <Button type="primary" onClick={showModal}>
                添加
            </Button>
            <Modal
                title="添加信息"
                visible={visible}
                onOk={handleOk}
                onCancel={handleCancel}
                okText="确认添加"
            >
                <Input
                    name="id"
                    placeholder="请输入编号"
                    value={formValues.id}
                    onChange={handleInputChange}
                    style={{ marginBottom: 10 }}
                />
                <Input
                    name="name"
                    placeholder="请输入名称"
                    value={formValues.name}
                    onChange={handleInputChange}
                />
            </Modal>
        </div>
    );
};

export default ModalComponent;